import React from "react";
import { Button, Layout, Avatar,Dropdown} from 'antd';
import './index.css'
import { MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons'
import { useDispatch } from "react-redux";
import { collapseMenu } from '../../store/reducers/tab'
const { Header} = Layout;

const CommonHeader = ({collapsed}) =>{
    const logOut = () =>{

    }

    const items = [
        {
            key: '1',
            label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                个人中心
            </a>
            ),
        },
        {
            key: '2',
            label: (
            <a onClick={()=>logOut} target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
                退出
            </a>
            ),
        }
    ]

    const dispatch = useDispatch()
    // 点击展开收起按钮
    const setcollapsed = () =>{
        console.log(collapsed,'commonHeader')

        dispatch(collapseMenu())
    }


    return (

        <Header className="main-header">
          <Button
            type="text"
            icon = {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            style={{
              fontSize: '16px',
              width: 50,
              height: 32,
              background: '#fff'
            }}
            onClick={() => setcollapsed()}
          />
          
        <Dropdown menu={{ items }}>
             <Avatar size={32} src={<img src={require("../../assets/images/user-default.png")} alt="avatar" />} />
        </Dropdown>
        
        </Header>
        
    )


}

export default CommonHeader